<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="string" uri="http://jakarta.apache.org/taglibs/string-1.1" %>
<%@ taglib uri="/WEB-INF/tlds/pagination.tld" prefix="pagination" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Dayve web</title>
<link href="/common/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/common/js/common.js"></script>
<script type='text/javascript' src="/common/dwr/engine.js"></script>
<script type='text/javascript' src="/common/dwr/util.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Locale 설정을 바꾼다.
function jsChangeLocaleKR() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "index";
    TheForm.action = "${pageContext.request.contextPath}/changeLocale.do?language=kr";
    TheForm.submit();
}

function jsChangeLocaleEN() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "index";
    TheForm.action = "${pageContext.request.contextPath}/changeLocale.do?language=en";
    TheForm.submit();
}

function jsChangeLocaleZH() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "index";
    TheForm.action = "./changeLocale.do?language=zh";
    TheForm.action = "${pageContext.request.contextPath}/changeLocale.do?language=zh";
    TheForm.submit();
}

// Community Board List 페이지로 이동한다.
function jsCommunityBoardList() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "communityBoardList";	// page name
    TheForm.action = "./communityBoardList.do";
    TheForm.submit();
}

// Photo Board List 페이지로 이동한다.
function jsPhotoBoardList() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "photoBoardList";	// page name
    TheForm.action = "./photoBoardList.do";
    TheForm.submit();
}

// Notice Board List 페이지로 이동한다.
function jsNoticeBoardList() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "noticeBoardList";	// page name
    TheForm.action = "./noticeBoardList.do";
    TheForm.submit();
}

// 회원탈퇴
function jsDeleteMember() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "index";	// page name
    TheForm.action = "./deleteMemberById.do";
    TheForm.submit();
}

// Contact Us 페이지로 이동한다.
function jsContactUs() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "contactus";	// page name
    TheForm.action = "./contactus.do";
    TheForm.submit();
}

// FAQ 페이지로 이동한다.
function jsFAQ() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "faq";	// page name
    TheForm.action = "./faq.do";
    TheForm.submit();
}

// frm 의 첨부파일 버튼 초기화
function jsFileReset() {
    document.frm.fileUp.select();
    document.selection.clear();
}

// 회원정보 수정
function jsUpdateMember() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "updateMember";	// page name
    TheForm.action = "./updateMember.do";
    TheForm.submit();
}

// 회원정보 수정
function jsLogout() {
    var TheForm = document.menuFrm;
    TheForm.nextTarget.value = "index";	// page name
    TheForm.action = "./logout.do";
    TheForm.submit();
}

// 메일 보내기
function jsSendContact() {
    var TheForm = document.frm;
    if(trim(TheForm.content.value) == ""){
        alert('<spring:message code="myPageContent.inputCheck" />');
        TheForm.content.value = "";
        TheForm.content.focus();
        return false;
    }else{
        var now = new Date();                                                  // 현재시간
        var nowTime = now.getFullYear() + "<spring:message code="myPageContent.year" />" + (now.getMonth()+1) + "<spring:message code="myPageContent.month" />" + now.getDate() + "<spring:message code="myPageContent.day" />" + now.getHours() + "<spring:message code="myPageContent.hour" />" + now.getMinutes() + "<spring:message code="myPageContent.minute" />" + now.getSeconds() + "<spring:message code="myPageContent.second" />";
        TheForm.date.value = nowTime;

        for(i = 0; i<TheForm.flag.length; i++){
            if(TheForm.flag[i].checked == true){
                TheForm.category.value = TheForm.flag[i].value;
            }
        }
        alert('<spring:message code="myPageContent.thanks" />');
        TheForm.nextTarget.value = "intro";	// page name
        TheForm.action = "./sendContact.do";
        TheForm.submit();
    }
}

function jsLogin(){
    alert('<spring:message code="myPageContent.needLogin" />');
    if(confirm('<spring:message code="myPageContent.loginGo" />')){
        location.href = "index.do";
    }else{
        return false;
    }
}

function getLastDay(y, m){
    var lastdate = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //각 달의 마지막 날짜

    year = y;

    if((0==year%4&&0!=year%100)||0==year%400){ //year를 가지고 윤년인지 검사.
        lastdate[1] = 29; /*윤년인 경우 2월의 마지막 날짜를 29로 입력*/
    }

    month = m;

    day = lastdate[month-1];
    return day;
}

function myPageContent(categoryId) {
    var TheForm = document.frm;
    var now = new Date();

    var month = now.getMonth()+1;

    if(month < 10){
        month = "0" + month;
    }

    TheForm.date.value = now.getFullYear() + "-" + month;
    TheForm.lastDay.value = getLastDay(now.getFullYear(), month);

    TheForm.id_myhistory_categories.value = categoryId;
    TheForm.action = "./myPageContent.do";
    TheForm.submit();
}

function myPageContentByDate() {
    var TheForm = document.frm;

    var mon = TheForm.monthBox.value;

    if(mon < 10){
        mon = "0" + mon;
    }

    TheForm.date.value = TheForm.yearBox.value + "-" + mon;
    TheForm.lastDay.value = getLastDay(TheForm.yearBox.value, mon);

    TheForm.id_myhistory_categories.value = ${categoryId};
    TheForm.action = "./myPageContent.do";
    TheForm.submit();
}

google.load("visualization", "1.1", {packages:['corechart', 'controls']});


google.setOnLoadCallback(drawPieChart);
function drawPieChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Item');
    data.addColumn('number', 'Amount');


<c:forEach items="${itemList}" var="itemList" varStatus="serviceStatus" begin="0" end="${itemCount}"
step="1">

    data.addRows([
        ['${itemList.name}', ${itemList.amount}]
    ]);
</c:forEach>

    var options = {
        title: '',
        legend: 'bottom'
    };

    var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
    chart.draw(data, options);
}

google.setOnLoadCallback(drawColumnChart);
function drawColumnChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Item');
    data.addColumn('number', 'Amount');

<c:forEach items="${itemList}" var="itemList" varStatus="serviceStatus" begin="0" end="${itemCount}"
step="1">

    data.addRows([
        ['${itemList.name}', ${itemList.amount}]
    ]);
</c:forEach>

    var options = {
        title: '',
        legend: 'none'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_div'));
    chart.draw(data, options);
}

google.setOnLoadCallback(drawVisualization);
function drawVisualization() {

    var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'width': '60%'},
                    'hAxis': {'baselineColor': 'none'},
                    'lineWidth': 1
                },
//                // Display a single series that shows the closing value of the stock.
//                // Thus, this view has two columns: the date (axis) and the stock value (line series).
//                'chartView': {
//                    'columns': [0, 0]
//                },
                // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
                'minRangeSize': 86400000
            }
        },
        // Initial range: 2012-02-09 to 2012-03-20.
        'state': {'range': {'start': new Date(2012, ${date-1}, 1), 'end': new Date(2012, ${date-1}, ${lastDay})}}
    });

    // Define a Line chart
    var LineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart',
        'options': {

            'title': '${date}<spring:message code="myPageContent.month" /> ${name} <spring:message code="myPageContent.categoryStatus" />',
            'legend': 'bottom',
            'fontSize': 10,
            'pointSize': 1,
            'lineWidth': 1,
            'width': 769,
            'height': 500
        },
        // Convert the first column from 'date' to 'string'.
        'view': {
            'columns': [
                {
                    'calc': function(dataTable, rowIndex) {
                        return dataTable.getFormattedValue(rowIndex, 0);
                    },
                    'type': 'string'
                },
                <c:forEach items="${itemIdList}" var="itemIdList" varStatus="itemIdStatus" begin="0" end="${itemIdListCount}" step="1">
                <c:if test="${itemIdStatus.index < itemIdStatus.end}">
                ${itemIdStatus.index+1},
                </c:if>
                <c:if test="${itemIdStatus.index == itemIdStatus.end-1}">
                ${itemIdStatus.index+1}]
                </c:if>
                </c:forEach>

                <c:if test="${itemIdListCount == 0}">
                ]
                </c:if>
            }
        });

//Prepare Data
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');

<c:if test="${0 == itemIdListCount}">
data.addColumn('number', '');
</c:if>

<c:forEach items="${itemIdList}" var="itemIdList" varStatus="itemIdStatus" begin="0" end="${itemIdListCount}"
step="1">
data.addColumn('number', '${itemIdList}');

</c:forEach>


<c:forEach var="itemStep" varStatus="stepStatus" begin="0" end="${lastDay-1}" step="1">
var date = new Date(2012, ${date-1}, ${itemStep+1});
data.addRows([
    <c:if test="${0 < itemIdListCount}">

    [date,
        </c:if>

        <c:if test="${0 == itemIdListCount}">
        ['${itemStep+1}', 0]
        </c:if>

        <c:forEach items="${itemEventList}" var="itemEventList" varStatus="itemEventStatus" begin="${stepStatus.index}" end="${itemEventCount}"
        step="${lastDay}">

        <c:if test="${itemEventStatus.index < (itemEventCount - lastDay)-1}">
        ${itemEventList.amount},
        </c:if>

        <c:if test="${itemEventStatus.index == (itemEventCount - lastDay)-1}">
        ${itemEventList.amount},
        </c:if>

        <c:if test="${itemEventStatus.index > (itemEventCount - lastDay)-1}">
        ${itemEventList.amount}]
    </c:if>
    </c:forEach>
]);

</c:forEach>



//var chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
// Create the dashboard.
dashboard.bind(control, LineChart);
dashboard.draw(data);
}

</script>
</head>

<body>
<div id="wrapper">
    <!------------------------------ top 시작-------------------------------------->
    <%@include file="header.jsp" %>
    <!------------------------------ top 끝-------------------------------------->
    <div class="mypage_content">
        <img src="/images/intro/sub_title07.gif" class="mypage_title" />
        <div>
            <div class="mypage_category"><spring:message code="myPageContent.categoryList" /></div>
            <div class="mypage_info"><spring:message code="myPageContent.category" /> <strong>${totalCount}<spring:message code="myPageContent.amount" />개</strong> ㅣ <spring:message code="myPageContent.item" /> <strong>${totalItemCount}<spring:message code="myPageContent.amount" /></strong> ㅣ <spring:message code="myPageContent.favorite" /> <strong>${totalFavorite}<spring:message code="myPageContent.amount" /></strong> ㅣ <spring:message code="myPageContent.milege" /> <strong>${mileage}<spring:message code="myPageContent.point" /></strong></div>
        </div>
        <div class="mypage_bg">
            <form name="frm" method="POST">
                <input type="hidden" name="id_myhistory_categories" value="">
                <input type="hidden" name="date" value="">
                <input type="hidden" name="lastDay" value="">

                <div class="mypage_right">
                    <h3>${name}</h3>
                    <div>
                        <div style="width: 769px; height: 1700px; align: center">
                            <div id="column_chart_div" style="width: 769px; height: 500px;"></div>
                            <div id="pie_chart_div" style="width: 769px; height: 500px;"></div>
                            <div id="dashboard">
                                <div id="chart" style='width: 769px; height: 500px;'></div>
                                <div id="control" style='width: 769px; height: 100px;'></div>
                            </div>
                            <div style="height: 100px; text-align: center; margin-top: 20px;">
                                <p>
                                    <spring:message code="myPageContent.selectYearMonth" />
                                    <select name="yearBox" size="1">
                                        <option value = "2012" selected><spring:message code="myPageContent.thisYear" /><spring:message code="myPageContent.year" /></option>
                                    </select>

                                    <select name="monthBox" size="1">
                                        <c:forEach varStatus="monthStatus" begin="1" end="12" step="1">
                                            <option value = "${monthStatus.index}" <c:if test="${date == monthStatus.index}">selected</c:if>>
                                                    ${monthStatus.index}<spring:message code="myPageContent.month" />
                                            </option>
                                        </c:forEach>
                                    </select>

                                    <a href="javascript:myPageContentByDate()"><img src="/images/intro/btn_mypage_submit.gif"></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <ul>
                    <c:forEach items="${categoryList}" var="categoryList" varStatus="serviceStatus" begin="0" end="${totalCount}"
                               step="1">
                        <li><a href="javascript:myPageContent(${categoryList.id_myhistory_categories})">${categoryList.name}</a></li>
                    </c:forEach>
                </ul>
                <div class="clear"></div>
            </form>
        </div>
    </div>
    <!------------------------------ 하위메뉴 시작-------------------------------------->
    <%@include file="footer.jsp" %>
    <!------------------------------ 하위메뉴 끝-------------------------------------->

</div>
</body>
</html>
